<template>
	<view class="my-search-container">
		<view class="my-search-box">
			<uni-icons type="search" size="15"></uni-icons>
			<input
				class="search-input"
				type="text"
				placeholder="多种商品，一手货源"
				v-model="searchText"
				@confirm="searchHandle"
			/>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-search",
		data() {
			return {
				searchText: "", // 搜索框输入内容
			};
		},
		methods: {
			// 处理搜索跳转
			searchHandle() {
				// 校验输入内容
				if (!this.searchText.trim()) {
					uni.showToast({ title: "请输入搜索内容", icon: "none" });
					return;
				}
				// 跳转到搜索结果页面
				uni.navigateTo({
					url: `/pages/product/search/search?searchText=${this.searchText.trim()}`,
				});
			},
		},
	};
</script>



<style lang="scss">
.my-search-container{
	height: 40px;
	background-color: #00aa00;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	.my-search-box{
		height: 30px;
		background-color: #ffffff;
		border-radius: 18px;
		width:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		margin-left: 5px;
	}
}
</style>